<template>
  <div class="warp-box">
    <el-row class="search-box" style="margin-top: 30px;">
      <el-col :span="24">
        <div class="search-div">
          <el-date-picker
            v-model="time"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            @change="changeTime"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </div>
        <div class="search-div">
          <el-input style="width:266px;" v-model="appName" placeholder="请输入名称"></el-input>
        </div>
        <div class="search-div">
          <span class="search-btn backorgin" @click="search">搜索</span>
        </div>
      </el-col>
    </el-row>
    <div class="main-box channel1234">
      <div class="inforlist" v-cloak>
        <el-table :data="dataList" style="margin-top:20px;font-size:16px;" v-loading="loading">
          <el-table-column prop="limit" label="日期" width="140">
            <template slot-scope="scope">
              <span>{{formatDate(new Date(scope.row.createTime))}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="appName" width="120" label="名称"></el-table-column>
          <el-table-column prop="boundleId"  label="boundleId"></el-table-column>
          <el-table-column prop="channel" width="120" label="渠道"></el-table-column>
          <el-table-column prop="appRegNum" width="120" label="登录数"></el-table-column>
          <el-table-column prop="applyClickUv" width="180" label='"立即申请"点击人数'></el-table-column>
          <el-table-column prop="avgClick" width="160" label="平均点击产品数"></el-table-column>
          <el-table-column prop="applyClick" width="140" label="有效UV总和"></el-table-column>
        <el-table-column prop="status" label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <span>
                <i
                  @click="handleDown(scope.row)"
                  style="color:#f4ba41;font-size:20px;cursor:pointer;margin-right:10px;"
                  class="element-icons icon-xiazai1"
                ></i>
              </span>
            </template>
          </el-table-column>

        </el-table>
        <div class="pages-box">
          <div style="text-align:center;margin-top:20px;">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="start"
              :page-size="limit"
              layout="total, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      appName: "",
      start: 0,
      limit: 5,
      total: 0,
      time: "",
      startDate: "",
      endDate: "",
      dataList: []
    };
  },
  methods: {
    handleCurrentChange(val) {
      //页码切换
      var that = this;
      that.start = val;
      that.render();
    },
    changeTime() {
      if (this.time) {
        this.startDate = this.time[0];
        this.endDate = this.time[1];
      } else {
        this.startDate = "";
        this.endDate = "";
      }
    },
    render() {
      this.loading = true;
      this.$axios
        .get("/tx/report/app/list", {
          start: this.start,
          limit: this.limit,
          appName: this.appName,
          startDate: this.startDate,
          endDate: this.endDate
        })
        .then(res => {
          if (res.code === 10200) {
            this.dataList = res.data.list;
            this.total = res.data.count;
          }
          setTimeout(() => {
            this.loading = false;
          }, 200);
        });
    },
    formatDate(now) {
      var year = now.getFullYear(),
        month = now.getMonth() + 1,
        date = now.getDate(),
        hour = now.getHours(),
        minute = now.getMinutes(),
        second = now.getSeconds();
      return year + "-" + month + "-" + date;
    },
    handleDown(row) {
        let startTime = this.formatDate(new Date( row.createTime))
        window.location= this.$axios.api + '/tx/report/app/download?boundleId='+row.boundleId+'&channel='+row.channel+'&name='+row.appName+'&startDate='+startTime
    },
    search() {
      //查询
      this.start = 0;
      this.render();
    }
  },
  mounted() {
    let time = new Date();
    this.time = [time, time];
    this.startDate = time;
    this.endDate = time;
    this.render();
  }
};
</script>
